<template>
  <div class="user-info-manage">
    <el-card class="box-card">
      <div slot="header"
           class="clearfix">
        <span>输入日期</span>
      </div>
      <el-form :inline="true">
        <el-form-item label="选择日期"
                      class="el-form-item">
          <el-date-picker v-model="date"
                          type="week"
                          :picker-options="pickerOptions"
                          format="yyyy 第 WW 周"
                          ref="datepick">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="部门"
                      class="el-form-item">
          <el-input v-model="tableData[0].department"
                    placeholder="请输入部门"></el-input>
        </el-form-item>
        <el-form-item label="汇报人"
                      class="el-form-item">
          <el-input v-model="tableData[0].reporter"
                    placeholder="请输入汇报人"></el-input>
        </el-form-item>
        <el-form-item class="el-form-item">
          <el-button type="primary"
                     @click="query"
                     :loading="loading"
                     icon="el-icon-search">查询</el-button>
        </el-form-item>
        <el-form-item class="el-form-item">
          <el-button type="primary"
                     @click="add"
                     icon="el-icon-plus">添加</el-button>
        </el-form-item>
        <el-form-item class="el-form-item">
          <el-button type="primary"
                     circle
                     @click="exp"
                     icon="el-icon-download">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card"
             v-loading="loading">
      <div slot="header"
           class="clearfix">
        <span>{{tableData[0].children[0].title}}</span>
      </div>
      <el-table :data="tableData[0].children[0].children"
                border>
        <el-table-column type="index"
                         label="序号"
                         width="70">
        </el-table-column>
        <el-table-column prop="name"
                         label="执行事项名称"
                         width="160">
        </el-table-column>
        <el-table-column prop="type"
                         label="类型"
                         width="100">
        </el-table-column>
        <el-table-column prop="main_executor"
                         label="主执行人"
                         width="90">
        </el-table-column>
        <el-table-column prop="others_executor"
                         label="其他执行人"
                         width="160">
        </el-table-column>
        <el-table-column prop="specific_content"
                         label="本周执行的具体内容">
        </el-table-column>
        <el-table-column prop="comment"
                         label="备注（补充说明）">
        </el-table-column>
        <el-table-column label="操作"
                         width="200">
          <template slot-scope="scope">
            <el-button size="mini"
                       @click="alter(scope.$index, scope.row, '本周工作汇报')"
                       icon="el-icon-edit">编辑</el-button>
            <el-button size="mini"
                       type="danger"
                       @click="del(scope.$index, scope.row, '本周工作汇报')"
                       icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="box-card"
             v-loading="loading">
      <div slot="header"
           class="clearfix">
        <span>{{tableData[0].children[1].title}}</span>
      </div>
      <el-table :data="tableData[0].children[1].children"
                border>
        <el-table-column type="index"
                         label="序号"
                         width="70">
        </el-table-column>
        <el-table-column prop="name"
                         label="执行事项名称"
                         width="160">
        </el-table-column>
        <el-table-column prop="type"
                         label="类型"
                         width="100">
        </el-table-column>
        <el-table-column prop="main_executor"
                         label="主执行人"
                         width="90">
        </el-table-column>
        <el-table-column prop="others_executor"
                         label="其他执行人"
                         width="160">
        </el-table-column>
        <el-table-column prop="specific_content"
                         label="计划执行的具体内容">
        </el-table-column>
        <el-table-column label="操作"
                         width="200">
          <template slot-scope="scope">
            <el-button size="mini"
                       @click="alter(scope.$index, scope.row, '下周工作计划')"
                       icon="el-icon-edit">编辑</el-button>
            <el-button size="mini"
                       type="danger"
                       @click="del(scope.$index, scope.row, '下周工作计划')"
                       icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="box-card"
             v-loading="loading">
      <div slot="header"
           class="clearfix">
        <span>{{tableData[0].children[2].title}}</span>
      </div>
      <el-table :data="tableData[0].children[2].children"
                border>
        <el-table-column type="index"
                         label="序号"
                         width="70">
        </el-table-column>
        <el-table-column prop="name"
                         label="执行事项名称"
                         width="160">
        </el-table-column>
        <el-table-column prop="seriousness_level"
                         label="严重级别"
                         width="120">
        </el-table-column>
        <el-table-column prop="description"
                         label="具体描述">
        </el-table-column>
        <el-table-column label="操作"
                         width="200">
          <template slot-scope="scope">
            <el-button size="mini"
                       @click="alter(scope.$index, scope.row, '问题事项（困难点、问题点、风险点）')"
                       icon="el-icon-edit">编辑</el-button>
            <el-button size="mini"
                       type="danger"
                       @click="del(scope.$index, scope.row, '问题事项（困难点、问题点、风险点）')"
                       icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="box-card"
             v-loading="loading">
      <div slot="header"
           class="clearfix">
        <span>{{tableData[0].children[3].title}}</span>
      </div>
      <el-table :data="tableData[0].children[3].children"
                border>
        <el-table-column prop="index"
                         label="序号"
                         width="70">
        </el-table-column>
        <el-table-column prop="name"
                         label="执行事项名称"
                         width="160">
        </el-table-column>
        <el-table-column prop="raise_people"
                         label="提出人"
                         width="120">
        </el-table-column>
        <el-table-column prop="description"
                         label="具体描述问题和建设性建议">
        </el-table-column>
        <el-table-column label="操作"
                         width="200">
          <template slot-scope="scope">
            <el-button size="mini"
                       @click="alter(scope.$index, scope.row, '给部门的建议')"
                       icon="el-icon-edit">编辑</el-button>
            <el-button size="mini"
                       type="danger"
                       @click="del(scope.$index, scope.row, '给部门的建议')"
                       icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <add :option="dialogOptions"
         @addsuccess="addsuccess"></add>
    <edit :option="dialogOptions"></edit>
  </div>
</template>

<script>
import request from "@/utils/request";
import Add from "./dialog/Add";
import Edit from "./dialog/Edit";

export default {
  name: "report",
  data() {
    return {
      loading: false,
      dialogContent: undefined,
      dialogOptions: {
        isAddShow: false,
        isEditShow: false,
        data: {}
      },
      date: "",
      year: "",
      week: "",
      tableData: [
        {
          title: "团队综合工作周报",
          department: "",
          reporter: "",
          children: [
            {
              title: "本周工作汇报",
              children: []
            },
            {
              title: "下周工作计划",
              children: []
            },
            {
              title: "问题事项（困难点、问题点、风险点）",
              children: []
            },
            {
              title: "给部门的建议",
              children: []
            }
          ]
        }
      ],
      checkedList: "",
      checkedType: "",
      loading: false,
      pickerOptions: {
        firstDayOfWeek: 1
      }
    };
  },
  components: { Add, Edit },
  methods: {
    // 导出
    exp() {
      if (!this.tableData[0].department || !this.tableData[0].reporter) {
        this.$message({
          message: "请填入部门与汇报人之后再执行导出操作",
          type: "warning"
        });
        return;
      }
      if (!this.date) {
        this.$message({
          message: "请选择日期后执行导出操作",
          type: "warning"
        });
        return;
      }
      return request({
        url: "report/export",
        data: {
          year: this.year,
          week: this.week,
          content: this.tableData
        }
      }).then(data => {
        window.open(`http://119.28.106.222:80/${data}`);
      });
    },
    resetTableData() {
      this.tableData = [
        {
          title: "团队综合工作周报",
          department: "",
          reporter: "",
          children: [
            {
              title: "本周工作汇报",
              children: []
            },
            {
              title: "下周工作计划",
              children: []
            },
            {
              title: "问题事项（困难点、问题点、风险点）",
              children: []
            },
            {
              title: "给部门的建议",
              children: []
            }
          ]
        }
      ];
    },
    addsuccess(data) {
      this.tableData.splice(0, 1, data.content);
      this.$message({
        message: "添加成功",
        type: "success"
      });
    },
    deleteRecord(index) {
      // 删除选中记录
      this.loading = true;
      return request({
        url: "report/delete",
        data: {
          year: this.year,
          week: this.week,
          checkedType: this.checkedType,
          content: this.checkedList,
          index: index
        }
      })
        .then(data => {
          this.loading = false;
          this.tableData.splice(0, 1, data.content);
          this.$message({
            message: "删除成功",
            type: "success"
          });
        })
        .catch(err => {
          this.loading = false;
        });
    },
    add() {
      if (this.date) {
        this.dialogOptions.isAddShow = true;
        this.dialogOptions.year = this.year;
        this.dialogOptions.week = this.week;
      } else {
        this.$message({
          message: "请填入日期",
          type: "warning"
        });
      }
    },
    del(index, row, checkedType) {
      this.checkedType = checkedType;
      this.checkedList = row;
      this.$confirm("此操作将永久删除该记录, 是否继续?", "注意", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteRecord(index);
        })
        .catch(() => {});
    },
    alter(index, row, checkedType) {
      this.checkedType = checkedType;
      this.checkedList = row;
      this.dialogContent = Edit;
      this.dialogOptions.isEditShow = true;
      this.dialogOptions.year = this.year;
      this.dialogOptions.week = this.week;
      this.dialogOptions.type = checkedType;
      this.dialogOptions.data = row;
      this.dialogOptions.index = index;
    },
    functiontheWeek(date) {
      if (!date) {
        return;
      }
      let totalDays = 0;
      let years = date.getYear();
      if (years < 1000) years += 1900;
      let days = new Array(12);
      days[0] = 31;
      days[2] = 31;
      days[3] = 30;
      days[4] = 31;
      days[5] = 30;
      days[6] = 31;
      days[7] = 31;
      days[8] = 30;
      days[9] = 31;
      days[10] = 30;
      days[11] = 31;

      //判断是否为闰年，针对2月的天数进行计算
      if (Math.round(date.getYear() / 4) == date.getYear() / 4) {
        days[1] = 29;
      } else {
        days[1] = 28;
      }
      if (date.getMonth() == 0) {
        totalDays = totalDays + date.getDate();
      } else {
        var curMonth = date.getMonth();
        for (var count = 1; count <= curMonth; count++) {
          totalDays = totalDays + days[count - 1];
        }
        totalDays = totalDays + date.getDate();
      }
      //得到第几周
      var week = Math.round(totalDays / 7);
      return week + 1;
    },
    query() {
      if (!this.date) {
        this.$message({
          message: "请选择日期",
          type: "warning"
        });
        return;
      }
      // 查询周报
      this.loading = true;
      return request({
        url: "report/query",
        data: {
          year: this.year,
          week: this.week
        }
      }).then(data => {
        if (data[0]) {
          this.tableData.splice(0, 1, data[0].content);
        } else {
          this.resetTableData();
        }
        this.loading = false;
      });
    }
  },
  watch: {
    date: {
      handler: function(newValue, oldValue) {
        this.year = newValue.getFullYear();
        this.week = this.functiontheWeek(newValue);
      }
    }
  }
};
</script>


<style scope>
.user-info-manage {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin-top: 30px;
  width: 85%;
}
.el-form-item {
  margin-left: 30px;
}
.el-form-item1 {
  margin-left: 10px;
}
.box2-button {
  width: 130px;
}
.block {
  width: 30%;
  text-align: center;
}
</style>
